<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="data:,">
<meta charset="utf-8"/>
<title>Check</title>

<style>
h1 {font-size: 2em;}
h2 {font-size: 1.5em; margin-block-start: 0.0em; margin-block-end: 0.2em;}
h3 {font-size: 1.2em;}
p {font-size: 1em;}

.button {
	padding: 5px 10px;
    width: 210px;
	font-size: 16px;
}

</style>

</head>

<body style="font-family: arial">
 
<table>
    <tr><td colspan="2">Result:</td></tr>
    <tr>
        <td>
            <iframe name="maincontent" id ="maincontent" width="700px" height="700px"></iframe> 
        </td>
        <td style="padding-left: 15px;">
            <p>
                <input class="button" type="submit" id="take" onclick="doTake()" value="1. Take Picture">
            </p>
            <p>
                <input class="button" type="submit" id="align" onclick="doAlign()" value="2. Align Image"><br>
            </p>
            <p>
                Takes up to 2 Minutes!
            </p>			
            Digits and Analog recognition not yet implemented.
            <p>
                <input class="button" type="submit" id="digits" onclick="doDigits()" value="3a. Analyse Digits">    
            </p>
            <p>
                <input class="button" type="submit" id="analog" onclick="doAnalog()" value="3b Analyse Analog">    
            </p>
        </td>
    </tr>
</table>

<script type="text/javascript" src="./gethost.js"></script> 
<script type="text/javascript" src="./readconfig.js"></script>  
 
<script type="text/javascript">
    var basepath = "http://192.168.178.26";

    function doAnalog(){
        var xhttp = new XMLHttpRequest();
        url = basepath + "/editflow.html?task=test_analog";
        if (basepath.length > 0){
            url = url + "&host=" + basepath;
        }        
        xhttp.open("GET", url, false);
        xhttp.send();
        var html = xhttp.responseText;
        html = html.replace("src=\"/", "src=\"" + basepath + "/");

        document.getElementById("maincontent").src = 'data:text/html,' + encodeURIComponent(html);
    }


    function doDigits(){
        var xhttp = new XMLHttpRequest();
        url = basepath + "/editflow.html?task=test_digits";
        if (basepath.length > 0){
            url = url + "&host=" + basepath;
        }        
        xhttp.open("GET", url, false);
        xhttp.send();
        var html = xhttp.responseText;
        html = html.replace("src=\"/", "src=\"" + basepath + "/");

        document.getElementById("maincontent").src = 'data:text/html,' + encodeURIComponent(html);
    }


    function doAlign(){
        var xhttp = new XMLHttpRequest();
        url = basepath + "/editflow.html?task=test_align";
        if (basepath.length > 0){
            url = url + "&host=" + basepath;
        }        
        xhttp.open("GET", url, false);
        xhttp.send();
        var html = xhttp.responseText;
        html = html.replace("src=\"/", "src=\"" + basepath + "/");

        document.getElementById("maincontent").src = 'data:text/html,' + encodeURIComponent(html);

        document.getElementById("align").disabled = false;
//        document.getElementById("digits").disabled = false;
//        document.getElementById("analog").disabled = false;    
    }


    function doTake(){
        var xhttp = new XMLHttpRequest();
        url = basepath + "/editflow.html?task=test_take";
        if (basepath.length > 0){
            url = url + "&host=" + basepath;
        }
        xhttp.open("GET", url, false);
        xhttp.send();
        var html = xhttp.responseText;
        document.getElementById("maincontent").src = 'data:text/html,' + encodeURIComponent(html);

        document.getElementById("align").disabled = false;
        document.getElementById("digits").disabled = true;
        document.getElementById("analog").disabled = true;    
    }

    function Init(){
        basepath = getbasepath();
        document.getElementById("align").disabled = true;
        document.getElementById("digits").disabled = true;
        document.getElementById("analog").disabled = true;
    }

    Init();
    
</script>
 
</body>
</html>